<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
        <link rel="stylesheet" href="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css">

        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>

        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>
        <div class="tutorial">

            <h2>Hello world!</h2>

            <p>In the following few pages of the tutorial, we will understand how to create a basic
                <a href="introduction.html">JointJS diagram</a>:</p>

            <div class="paper" id="paper-hello-world"></div>

            <p>Feel free to copy-paste the program code into a new file and see it in action for yourself:</p>

            <pre class="line-numbers"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- content --&gt;
    &lt;div id="myholder"&gt;&lt;/div&gt;

    &lt;!-- dependencies --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"&gt;&lt;/script&gt;

    &lt;!-- code --&gt;
    &lt;script type="text/javascript"&gt;

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

            <p>Even though the code is quite short, it creates a fully interactive JointJS diagram.
                The program does everything a JointJS application needs to do in order to produce a visual output:</p>

            <ul>
                <li><a href="installation.html">Include JointJS and its dependencies</a></li>
                <li><a href="graph-and-paper.html">Define a graph and a paper</a></li>
                <li><a href="elements.html">Create two rectangular elements</a></li>
                <li><a href="links.html">Create one link to connect the elements</a></li>
            </ul>

            <p>We will look at each of these steps in turn.
                Use this list as an index of the basic tutorial topics.</p>

            <p><a href="installation.html">First, we need to make sure we have JointJS installed and ready to
                use.</a></p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>
        <script src="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"></script>

        <script src="js/hello-world.js"></script>
    </body>
</html>
